<template>
  <div class="home">
    <van-search disabled @click="$router.push('/search')" />
    <div class="sec_kill" v-if="secKillResponse">
      <div class="sec_kill_timer">
        <span>{{ secKillResponse.time.split(",")[0] }} 场</span
        >&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ secKillTimer }}</span>
      </div>
      <div class="sec_kill_pros"></div>
    </div>
    <div class="coupons">
      <h3>领取优惠券<a href="#">查看更多&gt;</a></h3>
      <div class="coupons-container">
        <div
          class="coupons-item"
          v-for="item in coupons"
          :key="item.id"
          :style="{ backgroundColor: item.isUse ? '#999' : '#333' }"
        >
          <h3>{{ item.money }}</h3>
          <p>满{{ item.minPrice }}元可用</p>
          <div v-if="item.isUse">
            <p>已领取</p>
          </div>
          <button v-else @click="getCoupons(item.id)">领取</button>
        </div>
      </div>
    </div>
    <div class="cates_search">
      <input
        type="text"
        v-model="cates_kw"
        placeholder="搜索关键字"
        @keyup.enter="goToCatesSearch"
      />
    </div>
    <h3>限时秒杀</h3>
    <router-link to="/detail/95?type=seckill"
      >CAMOLA&KORALI品牌女包</router-link
    >
    <h3>拼团惠</h3>
    <router-link to="/detail/23?type=pt">LAORENTOU牛皮女包</router-link>
    <h3>商品排行</h3>
    <router-link to="/detail/2?type=normal">小米MIX4</router-link>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      secKillResponse: null,
      productList: [],
      secKillTimer: "00:00:00",
      timer: null,
      coupons: [],
      cates_kw: "",
    };
  },
  created() {
    // 获取秒杀数据
    this.$axios
      .get("https://apif.java.crmeb.net/api/front/seckill/index")
      .then(({ data }) => {
        if (data) {
          this.secKillResponse = data.data.secKillResponse;
          this.calcSecKillTimer();
          this.productList = data.data.productList;
          this.timer = setInterval(() => {
            this.calcSecKillTimer();
          }, 1000);
        }
      });

    // 领取优惠券
    // https://apif.java.crmeb.net/api/front/coupons?page=1&limit=20
    this.$axios
      .get("https://apif.java.crmeb.net/api/front/coupons?page=1&limit=20")
      .then(({ data }) => {
        // console.log(data);
        this.coupons = data.data;
      });
  },
  methods: {
    calcSecKillTimer() {
      // destTimer: 截至时间的时间戳，单位是s
      const destTimer = this.secKillResponse.timeSwap * 1;
      // curTimer: 当前时间的时间戳，单位是s
      const curTimer = parseInt(Date.now() / 1000);
      // 计算剩余总秒数
      const totalSec = destTimer - curTimer;
      // 将总秒数换算成：时-分-秒
      // 剩余秒数
      let sec = parseInt(totalSec % 60);
      sec = sec < 10 ? "0" + sec : sec;
      // 剩余总分钟数
      let total_min = parseInt(totalSec / 60);
      // 分钟数
      let min = parseInt(total_min % 60);
      min = min < 10 ? "0" + min : min;
      // 小时数
      let hour = parseInt(total_min / 60);
      hour = hour < 10 ? "0" + hour : hour;
      this.secKillTimer = `${hour}:${min}:${sec}`;
    },
    getCoupons(id) {
      this.$axios
        .post("https://apif.java.crmeb.net/api/front/coupon/receive", {
          couponId: id,
        })
        .then(({ data }) => {
          if (data.code == 200) {
            alert("领取成功");
            this.$axios
              .get(
                "https://apif.java.crmeb.net/api/front/coupons?page=1&limit=20"
              )
              .then(({ data }) => {
                // console.log(data);
                this.coupons = data.data;
              });
          }
        });
    },
    goToCatesSearch() {
      if (this.cates_kw) {
        this.$router.push(`/csearch?kw=${this.cates_kw}`);
      } else {
        alert("请输入关键字");
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.sec_kill_timer {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: yellow;
}
.coupons {
  background-color: gray;
  padding-bottom: 15px;
  h3 {
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
  .coupons-container {
    display: flex;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .coupons-item {
      color: yellow;
      background-image: url("../assets/coupons.png");
      background-repeat: no-repeat;
      background-color: #333;
      background-size: contain;
      flex-shrink: 0;
      width: 100px;
      text-align: center;
      margin: 0 10px;
    }
  }
}
</style>
